<template>
  <div class="page-deviceInfo">
    <!-- 站点信息 -->
    <div v-if="deviceInfo.name" class="d-header">
      <div class="d-info-box">
        <div class="d-name">{{deviceInfo.name}}</div>
        <div class="d-distance"><span class="d-address">{{deviceInfo.area}}{{deviceInfo.address}}</span></div>
        <div class="d-long">距离：4.1km</div>
        <div class="s-status">
          <div class="s-x"><i>闲</i>9个</div>
          <div class="s-m"><i>忙</i>1个</div>
          <div class="s-a"><i>共</i>10个</div>
        </div>
      </div>
      <!-- 站点操作栏 -->
      <div class="d-toolbar">
        <div class="d-t-item">
          <div v-if="collected"  @click="switchFavority" class="d-favority d-favority-selected">收藏</div>
          <div v-else @click="switchFavority" class="d-favority">收藏</div>
        </div>
        <div class="d-t-item">
          <div @click="GoAddress" class="d-nav">导航</div>
        </div>
      </div>
    </div>

    <!-- 插头列表 -->
    <div class="d-list">
      <div v-for="item in plugList" v-bind:key="item.id" class="d-ele">
        <div class="d-elm-box" v-bind:class='{"d-elm-box-select":item.countDown!=-1}'>
          <div class="d-e-num">12</div>
          <!-- <div class="d-e-num">{{item.number}}</div> -->

          <div v-if="item.countDown!=-1" @click="GoChargeDetails(item.order.id)" class="d-status" v-bind:class='{"d-ele-active":item.countDown!=-1}'>
            <p>剩余时间</p>
            <count-down :countDownTime="item.countDown"></count-down>
          </div>

          <div v-else  @click="GoChargeStart(item.id,item.number)" class="d-status"></div>
          <!-- <div v-else  @click="GoChargeStart(item.id,item.number)" class="d-status">{{['空闲','使用中','离线'][item.state]}}</div> -->

        </div>
      </div>
    </div>
    <!-- 资费说明 -->
    <div class="d-info d-info-txt">
      <h4>说明(本资费仅为移动支付费用，不代表现场刷卡资费)</h4>
      <div class="d-info-body">
        <dl>
          <dt>按时收费(<span>充电过程中，充电器过载引起的意外中断，插头被人拔出等情况，充电剩余金额不予返还</span>)</dt>
          <dd>1元/4小时　　2元/8小时　　3元/充满</dd>
        </dl>
        <dl>
          <dt>按量收费</dt>
          <dd>根据充电电量来收费，充多少电算多少钱，剩余的钱退到您的余额账户</dd>
        </dl>
      </div>
    </div>

  </div>
</template>

<script>
import countDown from "../components/countdown.vue";
import Interface from "../GlobalData";
import { Toast, Indicator } from "mint-ui";
export default {
  name: "DeviceInfo",
  data() {
    return {
      collected: false,
      deviceInfo: {
        id: "",
        name: "",
        area: "",
        address: "",
        num: "",
        lat: "",
        lng: ""
      },
      plugList: []
    };
  },
  mounted() {
    var self = this;
    var id = self.$route.query.id;
    self.id = id;
    // 初始化数据
    self.initData(id);
  },
  components: {
    countDown
  },
  methods: {
    switchFavority() {
      var self = this;
      var data;
      if (self.collected) {
        data = self.cacelFav({
          id: self.deviceInfo.id
        });
      } else {
        data = self.addFav({
          id: self.deviceInfo.id
        });
      }

      if (self.deviceInfo.id) {
        // 请求配置
        var req = this.Axios({
          method: "post",
          url: Interface.host,
          data: data
        });

        // 请求成功
        req.then(res => {
          var data = res.data.data;
          if (data.addToFavorite) {
            self.collected = true;
          } else {
            self.collected = false;
          }
        });
      }
    },
    initData(id) {
      var self = this;
      $.ajax({
        url: Interface.host,
        type: "GET",
        data: self.getQeury({
          id: id
        }),
        beforeSend: () => {
          Indicator.open({
            text: "加载中...",
            spinnerType: "fading-circle"
          });
        },
        success: res => {
          Indicator.close();
          var site = res.data.site;
          var obj = {};
          obj.name = site.name;
          self.collected = site.collected;
          obj.address = site.address;
          obj.area = site.area;
          obj.lat = site.lat;
          obj.lng = site.lon;
          obj.id = site.id;
          self.deviceInfo = obj;
          self.plugList = site.plugs;
        },
        error: err => {
          console.log(err);
          Toast("服务器开小差了~");
        }
      });
    },
    getQeury({ id }) {
      // state 0=在线，空闲 1=在线，充电中  2=离线
      return {
        query: `{
            site(id:${id}){
               	name
                lat
                lon
                area
                collected
                address
                id
                plugs {
                  id
                  code
                  number
                  sn
                  state
                  countDown
                  order{
                    id
                  }
                }
            }
          }`
      };
    },
    addFav({ id }) {
      return {
        query: `mutation{
            addToFavorite(siteId: ${id})
        }`
      };
    },
    cacelFav({ id }) {
      return {
        query: `mutation{
            removeForFavorite(siteId: ${id})
        }`
      };
    },
    init() {
      //更新（获取设备信息）
      var self = this;
      $.ajax({
        url: Interface.InitPlugsDetails + self.id,
        type: "GET",
        data: { deviceId: self.id },
        success: function(res) {
          var data = res.data;
          self.deviceInfo = data.info;
          self.plugList = data.plugs;
        },
        error: function() {
          Toast("初始化设备信息失败");
        }
      });
    },
    GoSweep() {
      wx.ready(function() {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            console.log(result);
          }
        });
      });
    },
    GoChargeStart(id, num) {
      var self = this;
      this.$router.push({
        path: "chargeStart",
        query: { id: id, num: num }
      });
    },
    GoChargeDetails(id) {
      this.$router.push({
        path: "chargeDetails",
        query: { id: id }
      });
    },
    GoAddress() {
      var self = this;
      var dInfo = self.deviceInfo;
      var address = dInfo.area + dInfo.address;
      wx.ready(function() {
        wx.openLocation({
          latitude: dInfo.lat * 1, // 纬度，浮点数，范围为90 ~ -90
          longitude: dInfo.lng * 1, // 经度，浮点数，范围为180 ~ -180。
          name: dInfo.name, // 位置名
          address: address, // 地址详情说明
          scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: "http://weixin.qq.com" // 在查看位置界面底部显示的超链接,可点击跳转
        });
      });
    }
  }
};
</script>



<style lang="less" scoped>
.page-deviceInfo {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}

// 第一栏
.d-header {
  border-bottom: 1px solid #ececec;
  color: #333;
  height: 260px;
  font-size: 26px;
  display: -webkit-box;
  background: #fff;
  margin-bottom: 20px;

  .d-info-box {
    -webkit-box-flex: 1;
    box-sizing: border-box;
    margin: 30px 0 30px 30px;
    padding: 0 30px 0 0;
    border-right: 2px solid #ddd;
    color: #999;
    .d-name {
      font-size: 32px;
      height: 50px;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 5px;
      color: #000;
    }
    .d-distance {
      line-height: 35px;
      color: #999;
    }
    .d-long {
      display: inline-block;
      height: 40px;
      line-height: 40px;
    }
    .d-address {
      display: inline-block;
    }
    .s-status {
      display: -webkit-box;
      width: 500px;
      height: 40px;
      line-height: 40px;

      & > div {
        -webkit-box-flex: 1;
        i {
          display: inline-block;
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-style: normal;
          background: #af0311;
          font-size: 22px;
          color: #fff;
          margin-right: 5px;
          border-radius: 5px;
        }
        &.s-x {
          i {
            background: #38a83a;
          }
        }
        &.s-m {
          i {
            background: #e4020d;
          }
        }
        &.s-a {
          i {
            background: #fe9055;
          }
        }
      }
    }
  }
  // 第二栏
  .d-toolbar {
    width: 150px;
    height: 240px;
    margin: 10px 0 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    box-sizing: border-box;

    .d-t-item {
      -webkit-box-flex: 1;
      width: 100%;
      box-sizing: border-box;
      display: -webkit-box;

      & > div {
        -webkit-box-flex: 1;
        text-align: center;
        line-height: 180px;
      }
      .d-favority {
        width: 100%;
        height: 100%;
        background: url("../public/imgs/icon-collect.svg") center 20px no-repeat;
        background-size: 45px 45px;
      }
      .d-favority-selected {
        background: url("../public/imgs/icon-collect-select.svg") center 20px
          no-repeat;
        background-size: 45px 45px;
      }
      .d-nav {
        background: url("../public/imgs/icon-nav.svg") center 20px no-repeat;
        background-size: 40px 40px;
      }
    }
  }
}

.d-info {
  box-sizing: border-box;
  padding: 30px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  color: #333;
  font-size: 26px;
}

.d-list {
  overflow: hidden;
  background: #fff;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 20px 0 0px 30px;

  .d-ele {
    float: left;
    width: 33%;
    height: 100px;
    font-size: 26px;
    color: #333;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    box-sizing: border-box;
    padding-right: 30px;
    margin-bottom: 20px;

    .d-elm-box {
      width: 100%;
      height: 100%;
      display: -webkit-box;
      border-radius: 10px;
      background: #2992ed;
      color: #fff;
      box-sizing: border-box;
      padding: 15px 0;
      &.d-elm-box-select{
        background: #dddddd;
      }

      .d-e-num {
        text-align: center;
        color: #fff;
        font-size: 38px;
        line-height: 70px;
        box-sizing: border-box;
        padding: 0 0 0 5px;
        text-align: center;
        width: 80px;
        border-right: 2px solid #fff;
      }
      .d-status {
        display: -webkit-box;
        -webkit-box-flex: 1;
        -webkit-box-align: end;
        -webkit-box-pack: center;
        background: url(../public/imgs/icon-plugs.svg) center no-repeat;
        background-size: 64px 64px;
      }

      .d-ele-active {
        position: relative;
        display: -webkit-box;
        -webkit-box-flex: 1;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        -webkit-box-orient: vertical;
        color: #ffaa2a;
        text-align: center;
        background: none;
        color:#fff;
        p{
          height: 35px;
          line-height: 35px;
        }
      }
    }
  }
}

.d-info-txt h4 {
  border-bottom: 1px solid #ececec;
  height: 75px;
  line-height: 75px;
  font-size: 26px;
  font-weight: normal;
}
.d-info-body {
  font-size: 26px;
  color: #333;
}
.d-info-body dl {
  padding: 20px 0;
  border-bottom: 1px solid #ececec;
}
.d-info-body dl:last-child {
  border-bottom: none;
}
.d-info-body dt {
  line-height: 40px;
  margin-bottom: 20px;
}
.d-info-body dt span {
  color: #999;
}
.d-info-body dd {
  line-height: 40px;
}

.page-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ececec;
  height: 120px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 30px;

  background: #fcfbfb;

  .btn {
    text-align: center;
    background: #00ac64;
    color: #fff;
    font-size: 28px;
    width: 100%;
    height: 100%;
    line-height: 80px;
    border-radius: 5px;
  }
}
</style>
